<template>
  <div class="page-wrap">
    <el-card shadow="never">
      <template #header>
        <div class="header">
          <span>交接班</span>
          <el-tag v-if="isOpen" type="success">营业中</el-tag>
          <el-tag v-else type="info">未开班</el-tag>
        </div>
      </template>

      <div v-if="!isOpen" class="open-form">
        <el-form :model="openForm" label-width="100px" class="w-420">
          <el-form-item label="收银员">
            <el-input v-model="openForm.operator" placeholder="例如：张三" />
          </el-form-item>
          <el-form-item label="备用金">
            <el-input-number v-model="openForm.openingCash" :min="0" :precision="2" />
          </el-form-item>
          <el-button type="primary" @click="onOpen">开班</el-button>
        </el-form>
      </div>

      <div v-else class="close-form">
        <el-descriptions title="当前班次" :column="2" border>
          <el-descriptions-item label="收银员">{{ currentShift.operator }}</el-descriptions-item>
          <el-descriptions-item label="开班时间">{{ fmt(currentShift.startTime) }}</el-descriptions-item>
          <el-descriptions-item label="备用金">{{ currentShift.openingCash }}</el-descriptions-item>
        </el-descriptions>
        <div class="mt-12">
          <el-form :model="closeForm" label-width="100px" class="w-520">
            <el-form-item label="现金盘点">
              <el-input-number v-model="closeForm.closingCash" :min="0" :precision="2" />
            </el-form-item>
            <el-form-item label="销售笔数">
              <el-input-number v-model="closeForm.salesQty" :min="0" />
            </el-form-item>
            <el-form-item label="销售金额">
              <el-input-number v-model="closeForm.salesAmount" :min="0" :precision="2" />
            </el-form-item>
            <el-form-item label="盈亏提示">
              <el-alert
                :title="profitHint"
                :type="profitType"
                show-icon
              />
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="closeForm.notes" type="textarea" />
            </el-form-item>
            <el-button type="danger" @click="onClose">结班</el-button>
          </el-form>
        </div>
      </div>
    </el-card>

    <el-card shadow="never" class="mt-12">
      <template #header><span>历史班次</span></template>
      <el-table :data="shifts" border stripe>
        <el-table-column prop="operator" label="收银员" width="120" />
        <el-table-column prop="startTime" label="开班时间" width="180">
          <template #default="{ row }">{{ fmt(row.startTime) }}</template>
        </el-table-column>
        <el-table-column prop="endTime" label="结班时间" width="180">
          <template #default="{ row }">{{ fmt(row.endTime) }}</template>
        </el-table-column>
        <el-table-column prop="openingCash" label="备用金" width="100" />
        <el-table-column prop="closingCash" label="现金盘点" width="100" />
        <el-table-column label="销售统计" min-width="160">
          <template #default="{ row }">{{ row.stats.salesQty }} 笔 / {{ row.stats.salesAmount }} 元</template>
        </el-table-column>
        <el-table-column prop="notes" label="备注" min-width="160" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, computed } from 'vue'
import { useShiftStore } from '@/stores/shift.js'

const store = useShiftStore()
const isOpen = computed(() => store.isOpen)
const currentShift = computed(() => store.currentShift)
const shifts = computed(() => store.shifts)

const openForm = reactive({ operator: '', openingCash: 0 })
const closeForm = reactive({ closingCash: 0, notes: '', salesQty: 0, salesAmount: 0 })

const profitHint = computed(() => {
  const expected = Number((Number(currentShift.value?.openingCash || 0) + Number(closeForm.salesAmount || 0)).toFixed(2))
  const diff = Number((Number(closeForm.closingCash || 0) - expected).toFixed(2))
  const symbol = diff > 0 ? '+' : ''
  return `预计=${expected}，实盘=${closeForm.closingCash || 0}，差额=${symbol}${diff}`
})
const profitType = computed(() => {
  const expected = Number((Number(currentShift.value?.openingCash || 0) + Number(closeForm.salesAmount || 0)).toFixed(2))
  const diff = Number((Number(closeForm.closingCash || 0) - expected).toFixed(2))
  if (diff === 0) return 'success'
  return diff > 0 ? 'warning' : 'error'
})

function onOpen(){
  if (!openForm.operator) return
  store.openShift(openForm)
  openForm.operator = ''
  openForm.openingCash = 0
}
function onClose(){
  store.closeShift(closeForm)
  closeForm.closingCash = 0
  closeForm.notes = ''
  closeForm.salesQty = 0
  closeForm.salesAmount = 0
}

function fmt(iso){ if (!iso) return '-'; const d = new Date(iso); return `${d.getFullYear()}-${(d.getMonth()+1).toString().padStart(2,'0')}-${d.getDate().toString().padStart(2,'0')} ${d.toTimeString().slice(0,8)}` }
</script>

<style scoped>
.page-wrap { padding: 16px; }
.header { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.open-form, .close-form { padding: 8px 0; }
.w-420 { width: 420px; }
.w-520 { width: 520px; }
.mt-12 { margin-top: 12px; }
</style>


